<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=0, user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="format-detection" content="telephone=no">
	<title>添加银行卡</title>
	<link rel="stylesheet" type="text/css" href="../../Public/css/reset.css"/>
	<link rel="stylesheet" type="text/css" href="../../Public/css/main.css"/>
	<link rel="stylesheet" type="text/css" href="../../Public/css/my.css"/>
	<script type="text/javascript" src="../../Public/js/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="../../Public/js/rem.js"></script>
	<script type="text/javascript" src="../../Public/js/swiper-3.3.1.jquery.min.js"></script>
</head>
<body>
	<!-- head start -->
	<header class="header psa clear bg-color1 bg-color3">
		<span class="back-button" onclick="history.go(-1)">
			<i></i>
			添加银行卡
		</span>
	</header>
	<!-- head end -->

	<!-- content start -->
	<section class="mt9">
		<form class="release_form js-ajax-form" action="" method="post" enctype="multipart/form-data">
		<p class="add-bank-card-des">请绑定持卡人本人的银行卡</p>
		<ul class="set_password add-bank-card">
			<li class="set_password_item">
				选择银行
				<select name="bank" style="margin-left:0.5rem;">
	                  <!--<php>$bankdata=sp_get_bank();</php>-->
					  <foreach name="bankdata" item="vo">
					   <!--<option value="{$key}">{$vo}</option>-->
					  </foreach>
				</select>
			</li>
			<li class="set_password_item">
				支行名称
				<input class="set_password_input cell_phone_num cell_num" type="text" name="branch" placeholder="" />
			</li>
			<li class="set_password_item set_card">
				银行卡号
				<input class="set_password_input cell_phone_num" type="text" name="card" placeholder="" />
			</li>
			<li class="set_password_item">
				开户城市
				<select class="release_form_select" name="province"  id="provinceSelect" onChange="updateCitiesData(this.options[this.options.selectedIndex].value);">
					<option value="0">=请选择=</option>
					<volist name="cache" id="vo"> 					
					  <option value="{$vo.id}">{$vo.name}</option> 					
					</volist>	
				</select>
				<select class="release_form_select" name="city" id="citySelect" onChange="updateCountriesData(this.options[this.options.selectedIndex].value);">
				</select>
				<select class="release_form_select" name="area" id="areaSelect" onChange="updateAreaName();">
				</select>
				<input name="area_name" type="hidden" id="area_name" value="">
			</li>
		</ul>
		
		<input class="set_password_btn ok_withdrawals" type="submit" name="" value="保存" />
		</form>
			
	</section>
	<!-- content end -->
	<script type="text/javascript" src="__TMPL__Public/js/mian.js"></script>
	<script type="text/javascript">
		var Input = $(".set_card input");
		
		//验证银行卡
		Input.eq(0).keyup(function(){
			var val = $(this).val();
			var reg = /^\d{16,19}$/.test(val);
			if(reg){
				$(this).attr("status","1");
			}else{
				$(this).attr("status","0");
			};
			showBtn();
		});
		
		//激活按钮
		function showBtn(){
			if(Input.eq(0).attr("status")==="1"){
				$(".set_password_btn").removeClass('ok_withdrawals');
				$(".set_password_btn").attr("status","1");
			}else{
				$(".set_password_btn").addClass('ok_withdrawals');
				$(".set_password_btn").attr("status","0");
			};
		};

		$(".set_password_btn").on(touchstart,function(){
			var status = $(this).attr("status");
			switch (status) {
				case "1":
					console.log("可以发送请求了！")
					break;
				case "0":
					break;
			};
		})
	</script>
<script>
		<if condition="$province gt 0">
		updateCitiesData({$province});
		<if condition="$city gt 0">
		$("#citySelect").find("option[value='{$city}']").attr("selected",true);
		</if>
		<if condition="$area gt 0">
		$("#areaSelect").find("option[value='{$area}']").attr("selected",true);
		</if>
		updateAreaName();
		</if>

        function updateCitiesData(provinceAreaCode){ 
			$.ajax({
				   url:"/index.php?g=User&m=Center&a=getCitiesData",
				   type: "POST",
				   data: {provinceAreaCode:provinceAreaCode},
				   async:false,
				   success: function(data){
					   if(data!=''){
						 $("#citySelect").show();
						 $("#citySelect").html(data.info);
					  }else{
						 $("#citySelect").hide();
					  }
				   }
			});
			$("#citySelect").trigger('onchange');
		}   
		
		function updateCountriesData(cityAreaCode){
			$.ajax({
					url:"/index.php?g=User&m=Center&a=getCitiesData",
				   type: "POST",
				   data: {provinceAreaCode:cityAreaCode},
				   async:false,
				   success: function(data){
					      if(data!=''){
							 $("#areaSelect").show();
							 $("#areaSelect").html(data.info);
						  }else{
							 $("#areaSelect").hide();
						  }
				   }
			});
			$("#areaSelect").trigger('onchange');
		}
		function updateAreaName(){
			$("#area_name").val($("#provinceSelect").find("option:selected").text()+' '+$("#citySelect").find("option:selected").text()+' '+$("#areaSelect").find("option:selected").text());
		} 
</script>
</body>
</html>